<template>
  <div class="page-container res-monitor">
    <div class="f-r a-c j-b">
      <div class="box-title">平台资源运行监控</div>
      <el-form inline>
        <el-form-item label="统计维度：">
          <el-radio-group v-model="searchParams.type">
            <el-radio :label="1" border>全市总览</el-radio>
            <el-radio :label="2" border>部门详情</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.dept" placeholder="选择部门">
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="none">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 270px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="infoIcon" />
                  <div>
                    <div class="radar-chart-top-title">集群数量</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">123</div>
                      <div class="radar-chart-top-unit">个</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option1" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 270px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="infoIcon" />
                  <div>
                    <div class="radar-chart-top-title">集群节点数量</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">123</div>
                      <div class="radar-chart-top-unit">个</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option2" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box box1 f-c" style="height: 270px">
            <div class="radar-chart-top f-g f-r j-b">
              <div class="f-c j-b f-s">
                <div class="f-r">
                  <el-image style="width: 49px;height: 53px;margin-top: -12px;margin-right: 5px" :src="infoIcon" />
                  <div>
                    <div class="radar-chart-top-title">累计告警数量</div>
                    <div class="radar-chart-top-value__wrap f-r">
                      <div class="radar-chart-top-value">123</div>
                      <div class="radar-chart-top-unit">个</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="radar-chart-box f-g">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option3" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="none">
      <div class="f-r">
        <div class="left1">
          <el-table
            :data="tableData"
          >
            <el-table-column
              v-for="item in columns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              align="center"
            />
          </el-table>
        </div>
        <div class="right1 f-g">
          <div class="f-r a-c" style="margin-bottom: 30px">
            <div class="box-title" style="margin-bottom: 0">服务价值分析</div>
            <div class="f-g f-r a-c j-e">
              <el-radio-group v-model="searchParams.time">
                <el-radio-button label="近1小时">近1小时</el-radio-button>
                <el-radio-button label="近3小时">近3小时</el-radio-button>
                <el-radio-button label="近12小时">近12小时</el-radio-button>
                <el-radio-button label="近14小时">近14小时</el-radio-button>
                <el-radio-button label="近7天">近7天</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <el-card shadow="none" class="card2" style="margin-bottom: 40px">
            <div class="card-box">
              <div class="card-header f-r a-c j-b">
                <span>集群CPU使用率</span>
                <i class="el-icon-setting" style="float: right;font-size: 26px" />
              </div>
              <div class="chart-box">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option4" />
              </div>
            </div>
          </el-card>
          <el-card shadow="none" class="card2">
            <div class="card-box">
              <div class="card-header f-r a-c j-b">
                <span>集群硬盘使用率</span>
                <i class="el-icon-setting" style="float: right;font-size: 26px" />
              </div>
              <div class="chart-box">
                <v-chart autoresize style="width: 100%;height: 100%;" :option="option5" />
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
const colors = ['#FFC1BF', '#FFDB85', '#45EFC8', 'rgba(112, 168, 246, 1)']
export default {
  name: 'AlarmAnalysis',
  data() {
    return {
      searchParams: {
        type: 1,
        dept: '',
        time: ' '
      },
      deptOptions: [],
      infoIcon: require('@/assets/alarm-analysis/2.png'),
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      tableData: [
        {
          集群名称: 'A集群'
        },
        {
          集群名称: 'A集群'
        },
        {
          集群名称: 'A集群'
        },
        {
          集群名称: 'A集群'
        }
      ],
      columns: [
        { prop: '集群名称', label: '集群名称', width: '', minWidth: '' },
        { prop: '集群状态', label: '集群状态', width: '', minWidth: '' },
        { prop: '集群类型', label: '集群类型', width: '', minWidth: '' }
      ]
    }
  },
  created() {
    this.option1 = this.getOption('可用情况分布', [
      {
        name: '可用集群',
        value: 110,
        itemStyle: {
          color: '#45EFC8'
        }
      },
      {
        name: '不可用集群',
        value: 20,
        itemStyle: {
          color: '#FFC1BF'
        }
      }
    ])
    this.option2 = this.getOption('节点类型分布', [
      {
        name: '管理节点',
        value: 123,
        itemStyle: {
          color: '#FFDB85'
        }
      },
      {
        name: '数据节点',
        value: 76,
        itemStyle: {
          color: '#427DF6'
        }
      }
    ])
    this.option3 = this.getOption('告警类型分布', [
      {
        name: '紧急告警',
        value: 123,
        itemStyle: {
          color: '#FF7474'
        }
      },
      {
        name: '重要告警',
        value: 76,
        itemStyle: {
          color: '#FFAB2E'
        }
      },
      {
        name: '次要告警',
        value: 123,
        itemStyle: {
          color: '#45EFC8'
        }
      },
      {
        name: '提示告警',
        value: 76,
        itemStyle: {
          color: '#70A8F6'
        }
      }
    ])
    this.option4 = this.getOption2([
      {
        name: 'A集群',
        color: '',
        data: [
          { name: '2020-03', value: 10 },
          { name: '2020-04', value: 10 },
          { name: '2020-05', value: 10 },
          { name: '2020-06', value: 10 },
          { name: '2020-07', value: 10 }
        ]
      },
      {
        name: 'B集群',
        color: '',
        data: [
          { name: '2020-03', value: 20 },
          { name: '2020-04', value: 30 },
          { name: '2020-05', value: 20 },
          { name: '2020-06', value: 20 },
          { name: '2020-07', value: 20 }
        ]
      },
      {
        name: 'C集群',
        color: '',
        data: [
          { name: '2020-03', value: 30 },
          { name: '2020-04', value: 40 },
          { name: '2020-05', value: 50 },
          { name: '2020-06', value: 60 },
          { name: '2020-07', value: 70 }
        ]
      },
      {
        name: 'D集群',
        color: '',
        data: [
          { name: '2020-03', value: 70 },
          { name: '2020-04', value: 70 },
          { name: '2020-05', value: 70 },
          { name: '2020-06', value: 70 },
          { name: '2020-07', value: 80 }
        ]
      }
    ])
    this.option5 = this.getOption2([
      {
        name: 'A集群',
        color: '',
        data: [
          { name: '2020-03', value: 10 },
          { name: '2020-04', value: 10 },
          { name: '2020-05', value: 10 },
          { name: '2020-06', value: 10 },
          { name: '2020-07', value: 10 }
        ]
      },
      {
        name: 'B集群',
        color: '',
        data: [
          { name: '2020-03', value: 20 },
          { name: '2020-04', value: 30 },
          { name: '2020-05', value: 20 },
          { name: '2020-06', value: 20 },
          { name: '2020-07', value: 20 }
        ]
      },
      {
        name: 'C集群',
        color: '',
        data: [
          { name: '2020-03', value: 30 },
          { name: '2020-04', value: 40 },
          { name: '2020-05', value: 50 },
          { name: '2020-06', value: 60 },
          { name: '2020-07', value: 70 }
        ]
      },
      {
        name: 'D集群',
        color: '',
        data: [
          { name: '2020-03', value: 70 },
          { name: '2020-04', value: 70 },
          { name: '2020-05', value: 70 },
          { name: '2020-06', value: 70 },
          { name: '2020-07', value: 80 }
        ]
      }
    ])
  },
  methods: {
    getOption(title, data) {
      return {
        title: [{
          text: title,
          top: '0',
          right: '10%',
          textStyle: {
            fontSize: 14,
            color: 'rgba(26, 26, 26, .5)'
          }
        }],
        legend: {
          orient: 'vertical',
          left: 70,
          bottom: 10,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: 'rgba(26, 26, 26, .8)',
            fontSize: 14
          },
          formatter: (name) => {
            return name + data.find(el => el.name === name).value + '个'
          },
          data
        },
        series: [
          {
            type: 'pie',
            z: 3,
            center: ['80%', '60%'],
            radius: ['45%', '75%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: { show: false },
            data
          }
        ]
      }
    },
    getOption2(data) {
      return {
        color: colors,
        legend: {
          show: true,
          right: 60,
          top: 10,
          itemWidth: 30,
          itemHeight: 4,
          itemGap: 20,
          icon: 'rect',
          data
        },
        grid: {
          left: 20,
          right: '0',
          top: 90,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: data.map((el) => {
          return {
            name: el.name,
            type: 'line',
            symbol: 'none',
            itemStyle: {
              color: el.color
            },
            data: el.data.map(el => {
              return {
                value: el.value,
                name: el.name
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.res-monitor {
  .el-table {
    .el-table__header-wrapper {
      tr {
        th {
          color: #ffffff;
          background-color: #0052D9;
          border-bottom: none;
        }
      }
    }
  }
  .card2 {
    .el-card__body {
      padding: 0 !important;
    }
    .card-box {
      position: relative;
      height: 340px;
      .card-header {
        padding: 0 20px;
        height: 41px;
        background: #F5F6F7;
        border-bottom: 1px solid #DCDCDC;
      }
      .chart-box {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
      }
    }
  }
  .left1 {
    width: 300px;
    flex-shrink: 0;
  }
  .right1 {
    margin-left: 30px;
  }
  .el-radio {
    width: 220px;
    height: 40px;
    margin-right: 20px;
    background: #fff;
  }
  .box-title {
    margin-bottom: 15px;
  }
  .box {
    border: 1px solid #ECF0F8;
  }
  .box2 {
    padding: 0 65px;
    .alarm-item {
      width: 100%;
    }
    .alarm-name {
      height: 19px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-left: 20px;
    }
    .alarm-value {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      text-align: right;
    }
  }
  .icon-up {
    background-image: url("~@/assets/alarm-analysis/up.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
    margin-bottom: 6px;
  }
  .icon-down {
    background-image: url("~@/assets/alarm-analysis/down.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 16px;
    height: 20px;
  }
  .box1 {
    padding:23px 19px;
    .box-title {
      font-size: 20px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      margin-bottom: 22px;
    }
    .radar-chart-top {
      position: relative;
      .radar-chart-box {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9;
      }
      .radar-chart-top-title {
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: 12px;
      }
      .radar-chart-top-title2 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        margin-bottom: 5px;
      }
      .radar-chart-top-value__wrap {
        font-family: Microsoft YaHei;
        font-weight: 500;
        color: #5C95F6;
        .radar-chart-top-value {
          font-size: 30px;
          line-height: 24px;
        }
        .radar-chart-top-unit {
          display: inline-block;
          font-size: 18px;
          margin-top: 4px;
        }
      }
      .radar-chart-top__rate {
        width: 100%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        opacity: 0.8;
        margin-bottom: 5px;
        .radar-chart-top__rate-value {
          opacity: 1;
          margin-left: 10px;
          margin-right: 5px;
        }
      }
    }
    .radar-chart-bottom {
      flex-shrink: 0;
      padding-top: 20px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 16px;
      line-height: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
    }
  }
  .rank-item {
    .item-color {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: rgb(236, 240, 248);
      margin: 0px 15px;
      text-align: center;
      line-height: 35px;
      font-size: 18px;
    }
    .item-value {
      margin-left: 50px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ED2826;
    }
    .item-unit {
      margin-left: 3px;
      margin-top: 2px;
    }
  }
  .rank-left {
    .rank-item:nth-of-type(1) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #FF7474, #FFC1BF);
    }
    .rank-item:nth-of-type(2) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #29DCC9, #45EFC8);
    }
    .rank-item:nth-of-type(3) .item-color {
      color: #ffffff;
      background: linear-gradient(45deg, #70A8F6, #427DF6);
    }
  }
  .card1 {
    .el-card__body {
      padding: 45px !important;
    }
    .radar-chart-top__rate {
      padding-top: 20px;
      margin-top: 30px;
      border-top: 2px dashed rgba(0, 82, 217, .5);
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1A1A1A;
      opacity: 0.8;
      margin-bottom: 10px;
      .radar-chart-top__rate-value {
        opacity: 1;
        margin-left: 10px;
        margin-right: 5px;
      }
      .el-image {
        width: 16px;
        height: 20px;
      }
    }

    .group_37 {
      padding: 4px 15px 4px 40px;
      height: 70px;
    }
    .text_15 {
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_16 {
      overflow-wrap: break-word;
      color: #333333;
      font-size: 30px;
      line-height: 30px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_17 {
      line-height: 16px;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
      margin-bottom: 5px;
      margin-left: 4px;
    }
  }

}
</style>

